<!--这边是路由所有组件-->
<template>
    <div>

<!--        这是轮播图-->
<!--        第一种调用轮播图插件 数组传值  **应该使用第一种方式-->
<!--        <swiper :lunbotulist="lunbotulist"></swiper>-->

<!--        第二种 轮播图直接写-->
        <mt-swipe :auto="4000">
<!--            在组件中 使用v-for循环的话 一定使用key-->
            <mt-swipe-item v-for="item in lunbotulist" :key="item.url">
                <img :src="item.img" alt="">
            </mt-swipe-item>

            <mt-swipe-item>2</mt-swipe-item>
            <mt-swipe-item>3</mt-swipe-item>
        </mt-swipe>

<!--        九宫格到六宫格的改造工程-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/newlist">
<!--       这个是图标         <span class="mui-icon mui-icon-home"></span>-->
<!--                本地引入图片-->
                <img src="../../image/menu1.png" alt="">
                <div class="mui-media-body">新闻咨询</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
<!--                <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>-->
                <img src="../../image/menu2.png" alt="">
                <div class="mui-media-body">图片分享</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodslist">
<!--                <span class="mui-icon mui-icon-chatbubble"></span>-->
                <img src="../../image/menu3.png" alt="">
                <div class="mui-media-body">商品购买</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<!--                <span class="mui-icon mui-icon-location"></span>-->
                <img src="../../image/menu4.png" alt="">
                <div class="mui-media-body">留言反馈</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<!--                <span class="mui-icon mui-icon-search"></span>-->
                <img src="../../image/menu5.png" alt="">
                <div class="mui-media-body">视频专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<!--                <span class="mui-icon mui-icon-phone"></span>-->
                <img src="../../image/menu6.png" alt="">
                <div class="mui-media-body">联系我们</div></a></li>
        </ul>


    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import swiper from "../subcomponents/swiper.vue"; //导入轮播图组件

    export default {
        data(){
            return{
                lunbotulist:[] // 保存轮播图的数组
            }
        },
        created() {
            this.getlunbotu();
        },
        methods:{
            getlunbotu(){ //  这是获取轮播图的方法
                this.$http.get("api/getlunbo").then(result =>{
                    console.log(result.body)
                    if(result.body.status===0){
                        //成功的
                        this.lunbotulist = result.body.message;
                        Toast('加载轮播图ok。。。')
                    }
                    else {
                        Toast('加载轮播图失败。。。')
                    }
                })

            }
        },
        components:{swiper},
        name: "HomeContainer"
    }
</script>

<style lang="scss" scoped>
//  找到类名 轮播图自己定义高度
.mint-swipe{
    height: 200px;

    //设置第一页面颜色为红色
    /*.mint-swipe-item:nth-child(1){*/
    /*    background-color:red ;*/

    // &符号代表交集选择器 根据轮播图的类 设置轮播图页面颜色
    .mint-swipe-item{
        &:nth-child(1){
            background-color: gray;
        }
        &:nth-child(2){
            background-color: darkgoldenrod;
        }
        &:nth-child(3){
            background-color: burlywood;
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
}

/* 设置六方格的背景色  mui-grid-view.mui-grid-9是整个的 */
.mui-grid-view.mui-grid-9{
    background-color: #ffffff;
    border: none;
    img{ //设置六空格图片尺寸
        width: 60px;
        height:60px;
    }
    .mui-media-body{ //  这一块是设置六宫格文字大小   这里面的设置都包含在 mui-grid-view.mui-grid-9 中
        font-size: 13px;
    }
}

// 设置取消六方格边框
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border: 0;
}

</style>